<template>
	<view class="indexPage">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<uni-nav-bar :fixed='true'>
			<view class="me-fx-row headerCenter me-fx-1 me-fx-row-c-c">
				<view class="sexBox me-fx-row-sa-c">
					<view :class="[index +1 == getGender ?'me-fx-row-sb-c avtiveSex':'me-fx-row-sb-c']" v-for="(item, index) in headPic" :key="index">
						<text>{{item.name}}</text>
						<image :src="item.src" mode="" class="sexPic"></image>
					</view>
				</view>
			</view>
			<view slot="left">
				<image src="../../static/img/aa.png" mode="" class="headerLeftPic" @click="seachBtn"></image>
			</view>
			<view slot="right">
				<image src="../../static/img/h.png" mode="" class="headerRightPic"></image>
			</view>
		</uni-nav-bar>
		<view class="titleBox me-fx-row-start-c">
			<view :class="[topListIndex == index?'topActive':'']" @click.stop="topHeader(item.keywords,index)" v-for="(item, index) in topList" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="list me-fx-row-sb-c" v-if="dataList.length > 0">
			<view class="listBox" v-for="(item, index) in dataList" :key="item.id">
				<view class="imagePicBix" @click="dataListBtn(item.id,item.username)">
					<image :src="item.avatar" mode="" class="imagePic"></image>
					<image src="../../static/img/other.png" mode="" class="classify" @click.stop="classifyBtn" :data-id='item.id'></image>
					<!-- <image src="../../static/img/jurisdiction.png" mode="" class="suo"></image> -->
				</view>
				<view class="listBottom">
					<view class="listBottomfrist me-fx-row-sb-c">
						<view class="nickName me-text-beyond">
							{{item.username}}
						</view>
						<view class="Right me-fx-row-start-c">
							<text class="blurC" v-for="(items, index) in item.certify_tag_id_collection" :key="index">{{items}}</text>
							<image src="../../static/img/vip.png" mode="" v-if="item.is_member"></image>
						</view>
					</view>
					<view class="me-fx-row-sb-c fristCenter">
						<view class="">
							{{item.city}}
						</view>
						<view class="">
							{{item.userInfo.age}}岁
						</view>
						<view class="">
							{{item.userInfo.job_id}}
						</view>
					</view>
					<view class="me-fx-row-start-c fristLast">
						<view class="adressBox bottomBox me-fx-row-start-c">
							<image src="../../static/img/adress.png" mode="" class="adress"></image>
							33.2km
						</view>
						<view class="bottomBox">
							3个月前
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nohave" v-if="nohave">
			<image src="../../static/img/newimg/xx.png" mode=""></image>
			暂时没有更多数据啦~
		</view>
		<!-- 弹框 -->
		<view class="Covering" v-if="classifyShow">
			<view class="bottomFiex">
				<view class="FiexTop">
					<view class="" @click="collectBtn(1)" :class="[Index == 1 ? 'active':'']">
						收藏
					</view>
					<view class="bottomBorder" @click="blacklistBtn(1)" :class="[Index2 == 1 ? 'active':'']">
						拉黑
					</view>
				</view>
				<view class="FiexBottom" @click="cancelBtn">
					取消
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import {
		getDateDiff
	} from '@/utils/utils'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				topList: [],
				topListIndex: 0,
				add_class: 0,
				classifyShow: false,
				Index: -1,
				Index2: -1,
				dataList: [],
				time: '',
				dataListID: '',
				page: 1,
				last_page: 0,
				url: 'near',
				// new
				headPic: [{
					name: '男',
					src: '../../static/img/boy3.png'
				}, {
					name: '女',
					src: '../../static/img/gril.png'
				}],
				getGender: '',
				barHeight: 25,
				nohave: false

			}
		},
		created() {
			this.IndexData(this.page, this.url);
			this.headData();
			this.getSystemStatusBarHeight()
			this.getSex()
		},
		methods: {
			//获取系统状态栏高度
			getSystemStatusBarHeight: function() {
				// #ifdef APP-PLUS
				var height = plus.navigator.getStatusbarHeight();
				this.barHeight = height;
				// #endif
				// #ifdef H5
				this.barHeight = 0;
				// #endif
			},
			onPullDownRefresh() {
				this.IndexData(this.page, this.url);
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			getSex() {
				this.$u.get('/user/base/gender').then(res => {
						if (res) {
							this.getGender = res.data.gender
						}
					})
					.catch((res) => {})
			},
			IndexData(page, url) {
				this.$u.get('/user/' + url + '/' + page).then(res => {
						if (res) {
							this.last_page = res.data.list.last_page
							if (res.data.list.data.length <= 0) {
								this.nohave = true
							} else {
								this.nohave = false
							}
							if (res.data.list.current_page == 1) {
								this.dataList = res.data.list.data
							} else {
								this.dataList = this.dataList.concat(res.data.list.data)
							}
							for (let i = 0; i <= res.data.list.data.length; i++) {
								if (res.data.list.data[i].last_online_time) {
									this.dataList[i].last_online_time = getDateDiff(res.data.list.data[i].last_online_time)
								}
							}
						}
					})
					.catch((res) => {})
			},
			headData() {
				this.$u.get('/index/tab').then(res => {
						if (res) {
							this.topList = res.data.list
						}
					})
					.catch((res) => {

					})
			},
			topHeader(keywords, index) {
				this.page = 1
				this.topListIndex = index
				this.url = keywords
				this.IndexData(this.page, keywords)
			},
			nowPrecedence(index) {
				if (this.add_class == 1) {
					this.add_class = 0;
				} else {
					this.add_class = index;
				}
			},
			dataListBtn(id, name) {
				uni.setStorage({
					key: 'userId',
					data: id,
				});
				uni.navigateTo({
					url: '../station/headDetails?id=' + id + '&name=' + name
				})
			},
			dataListBtn2(id, name) {
				uni.setStorage({
					key: 'userId',
					data: id,
				});
				uni.navigateTo({
					url: '../station/headDetails?id=' + id + '&name=' + name
				})
			},
			classifyBtn(e) {
				this.dataListID = e.currentTarget.dataset.id
				this.classifyShow = true
			},
			seachBtn() {
				uni.navigateTo({
					url: '../homePage/search'
				})
			},
			collectBtn(index) {
				this.Index = index
				this.$u.post('/like/lover/add', {
						id: this.dataListID
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '收藏成功',
								duration: 1000,
								icon: 'none'
							})
							this.classifyShow = false
							this.Index = -1
							console.log(res, 'res')
						} else {
							this.Index = -1
							this.classifyShow = false
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			onReachBottom() { //uniapp 监听下拉加载生命周期
				if (this.page >= this.last_page) {
					uni.showToast({
						title: '没有更多数据了',
						duration: 1000,
						icon: 'none'
					})
					return
				}
				this.page++
				this.IndexData(this.page, this.url)
			},
			blacklistBtn(index) {
				this.Index2 = index
				this.$u.post('/blacklist/add', {
						id: this.dataListID
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '拉黑成功',
								duration: 1000,
								icon: 'none'
							})
							this.classifyShow = false
							this.Index2 = -1
							console.log(res, 'res')
						} else {
							this.Index2 = -1
							this.classifyShow = false
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			cancelBtn() {
				this.classifyShow = false
			},
			// boySelectBtn() {
			// 	this.boySrc = '../../static/img/boy2.png';
			// 	this.girlSrc = '../../static/img/girl2.png'
			// 	this.topTtitle = false
			// },
			// girlSelectBtn() {
			// 	this.boySrc = '../../static/img/boy1.png';
			// 	this.girlSrc = '../../static/img/girl3.png';
			// 	this.topTtitle = true
			// },
		}
	}
</script>

<style>
	.headerBox {
		padding: 20rpx;
	}

	.active {
		color: #5C14FF;
	}

	.status_bar,
	.top_view {
		background-color: #8948F5 !important;
	}

	.headerRight {
		width: 190rpx;
		height: 50rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		font-size: 28rpx;
		line-height: 64rpx;
		text-align: center;
		line-height: 50rpx;
		border: 1px solid rgba(153, 153, 153, 1);
		color: rgba(153, 153, 153, 1);
	}

	.nowPrecedenceActive {
		border: 1rpx solid rgba(45, 40, 255, 1);
		color: rgba(26, 21, 255, 1);
	}

	.headerLeftPic {
		width: 38rpx;
		height: 38rpx;
	}

	.headerCenterPic {
		width: 20rpx;
		height: 10rpx;
		margin-left: 18rpx;
		display: block;
	}

	.headerLeftBox {
		width: 44rpx;
		height: 44rpx;
		margin-left: 44rpx;
	}

	.headerLeftBox image {
		display: block;
		width: 23rpx;
		height: 42rpx;
	}

	.titleBox {
		padding: 0rpx 30rpx 0rpx;
		color: #C0C0C0;
		box-sizing: border-box;
	}

	.titleBox view {
		margin-right: 100rpx;
		margin-top: 33rpx;
		font-size: 32rpx;
		color: rgba(102, 102, 102, 1);
	}

	.topActive {
		font-size: 42rpx;
		font-weight: bold;
		color: #333333;
		position: relative;
		padding-bottom: 20rpx;
	}

	.topActive::before {
		content: ' ';
		position: absolute;
		bottom: 0rpx;
		left: 0;
		width: 82rpx;
		height: 4rpx;
		background: rgba(76, 72, 245, 1);
		border-radius: 2rpx;
	}

	.list {
		padding: 16rpx;
		box-sizing: border-box;
		margin-bottom: 60rpx;
		flex-wrap: wrap;
	}

	.listBox {
		width: 49%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 28rpx 0rpx rgba(163, 163, 163, 0.19);
		border-radius: 6rpx;
		margin-bottom: 30rpx;
	}

	.listBox .imagePic {
		width: 100%;
		height: 359rpx;
		border-radius: 6rpx 6rpx 0rpx 0rpx;
	}

	.listBox .listRight {
		margin-left: 24rpx;
		width: 70%;
	}

	.listRightHL {
		width: 100%;
	}

	.listRightHL text,
	.listRightHL image {
		margin-right: 12rpx;
		width: 16%;
	}

	.listRightHL image {
		width: 50rpx;
		height: 25rpx;
		display: block;
	}

	.fristCenter view {
		/* width:102rpx; */
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		background: rgba(230, 229, 255, 1);
		border-radius: 15rpx;
		color: #AAAAAA;
		font-size: 24rpx;
		padding: 0 10rpx;
		margin-top: 16rpx;
		margin-right: 6rpx;
	}

	.fristLast .bottomBox {
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		background: rgba(229, 229, 229, 1);
		border-radius: 20px;
		color: rgba(147, 147, 147, 1);
		font-size: 24rpx;
		margin-top: 22rpx;
		margin-right: 20rpx;
		padding: 0 20rpx;
	}


	.blurC {
		display: inline-block;
		padding: 0 15rpx;
		height: 30rpx;
		text-align: center;
		background: rgba(122, 42, 255, 1);
		border-radius: 15rpx;
		font-size: 22rpx;
		color: rgba(255, 254, 254, 1);
	}

	.classify {
		width: 63rpx;
		height: 40rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.adressBox .adress {
		width: 14rpx;
		height: 18rpx;
	}

	.bottomFiex {
		width: 96%;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		font-size: 36rpx;
	}

	.bottomFiex .FiexTop {
		background-color: white;
		border-radius: 6rpx;
	}

	.FiexTop view {
		height: 110rpx;
		line-height: 110rpx;
	}

	.FiexBottom {
		background-color: white;
		height: 110rpx;
		line-height: 110rpx;
		border-radius: 6rpx;
		margin-top: 30rpx;
	}

	.bottomBorder {
		border-top: 1rpx solid rgba(236, 235, 235, 1);
	}

	.nohave {
		padding: 20rpx;
		text-align: center;
	}

	.nohave image {
		width: 100%;
		height: 537rpx;
		display: block;
	}

	.leftWidth {
		width: 100%;
	}

	.indexPage /deep/.uni-navbar--fixed {
		width: 100%;
	}

	/* new */
	.indexPage /deep/.uni-navbar,
	.indexPage /deep/.uni-navbar__content,
	.indexPage /deep/.uni-navbar__header {
		width: 100%;
		background-color: #8948F5 !important;
	}

	.sexBox {
		width: 190rpx;
		height: 66rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 33rpx;
	}

	.sexBox .sexPic {
		width: 17rpx;
		height: 22rpx;
		display: block;
		margin-left: 6rpx;
	}

	.headerRightPic {
		width: 40rpx;
		height: 42rpx;
		display: block;
		padding-left: 78rpx;
	}

	.avtiveSex {
		height: 62rpx;
		background: rgba(137, 72, 245, 1);
		border-radius: 31rpx;
		padding: 0 26rpx;
	}

	.listBottom {
		padding: 20rpx;
	}

	.listBottomfrist .nickName {
		width: 50%;
		font-size: 30rpx;
		font-weight: bold;
	}

	.Right image {
		width: 50rpx;
		height: 25rpx;
		display: block;
		margin-left: 6rpx;
	}

	.imagePicBix {
		position: relative;
	}

	/* .suo {
		position: absolute;
		top: 0;
		right: 65rpx;
		width: 49rpx;
		height: 40rpx;
		border-radius: 6rpx;
	} */
</style>
